<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06.canvasApi文字绘制</title>
</head>
<body>
<canvas id="canvas">

</canvas>

<script>
  window.onload = function () {
    console.log('onload');
    //获取canvas节点对象
    var canvasRef = document.querySelector('canvas');

    canvasRef.width = 600;
    canvasRef.height = 600;
    canvasRef.style.border = '1px solid #000'
    // //获取canvas上下文对象
    var ctx = canvasRef.getContext('2d');
    //绘制文字
    ctx.moveTo(300, 300);
    ctx.fillStyle = 'purple'; //设置填充颜色为紫色
    ctx.font = '20px "微软雅黑"'; //设置字体
    ctx.textBaseline = 'middle'; //设置字体底线对齐绘制基线
    ctx.textAlign = 'right'; //设置字体对齐的方式
    ctx.fillText('Top-g', 100, 300); //填充文字
    // ctx.strokeText( "left", 450, 400 );
    ctx.stroke();
    //  -------------------------------------------

  }
</script>
</body>
</html>
